@page "/blog/how-to-implement-validation-with-captcha"

<Seo Canonical="/blog/how-to-implement-validation-with-captcha" Title="How to implement validation with captcha" Description="Discover how to implementation validation with your Captcha component in Blazorise." ImageUrl="/img/blog/2024-05-08/how-to-implement-validation-with-captcha.png" />

<BlogPageImage Source="/img/blog/2024-05-08/how-to-implement-validation-with-captcha.png" Text="How to implement validation with captcha" />

<BlogPageTitle>
    How to implement validation with captcha
</BlogPageTitle>

<BlogPageParagraph>
    With the introduction of <Anchor To="news/release-notes/150" Title="Link to Blazorise v1.5">Blazorise v1.5</Anchor>, a new <Anchor To="docs/extensions/captcha" Title="Link to CAPTCHA component">CAPTCHA component</Anchor> has been integrated, offering an effective way to protect your applications from spam and abuse. This guide provides a step-by-step approach to integrating this CAPTCHA with Blazorise validation for enhanced security.
</BlogPageParagraph>

<BlogPageSubtitle>
    Setting Up CaptchaInput Component
</BlogPageSubtitle>

<BlogPageParagraph>
    If you're looking to integrate your captcha component into your Blazorise form validation, you can integrate it with Blazorise validation by following these steps:
</BlogPageParagraph>

<BlogPageList>
    <BlogPageListItem>
        Create your <Strong>CaptchaInput</Strong> component that inherits from <Code>BaseInputComponent&lt;bool&gt;</Code>.
    </BlogPageListItem>
    <BlogPageListItem>
        Override the required methods in order to make it work with Blazorise Validation.
    </BlogPageListItem>
</BlogPageList>

<BlogPageParagraph>
    Below you find a full example of the <Strong>CaptchaInput</Strong> component:
</BlogPageParagraph>

<BlogPageSourceBlock Code="HowToImplementvalidationWithCaptcha_CaptchaInputExample" />

<BlogPageSourceBlock Code="HowToImplementvalidationWithCaptcha_CaptchaInputCsExample" />

<BlogPageSubtitle>
    Example Usage in Forms
</BlogPageSubtitle>

<BlogPageParagraph>
    To use the <Strong>CaptchaInput</Strong> component, you can add it to your form like in the example below.
</BlogPageParagraph>

<BlogPageParagraph>
    Note that we're using the <Strong>ValidateRobot</Strong> method that we've already created as part of our <Strong>CaptchaInput</Strong>.
</BlogPageParagraph>

<BlogPageSourceBlock Code="HowToImplementvalidationWithCaptcha_CaptchaInputUsage" />

<BlogPageSubtitle>
    Conclusion
</BlogPageSubtitle>

<BlogPageParagraph>
    Due to the flexibility of Blazorise, you can easily integrate the Captcha component with Blazorise validation.
</BlogPageParagraph>

<BlogPageParagraph>
    You can also use this example to further create your own custom components that work with Blazorise validation.
</BlogPageParagraph>

<BlogPagePostInto UserName="David Moreira" ImageName="david" PostedOn="May 8th, 2024" Read="5 min" />
